﻿@page "/component/input/form"
@using Microsoft.AspNetCore.Components.Forms
@using System.ComponentModel.DataAnnotations

@code {
    [Required]
    public string Name { get; set; }

    [Required]
    [StringLength(6)]
    public string Password { get; set; }

    [Range(18, 60)]
    public string Age { get; set; }

    public string Description { get; set; }

    [Display(Name = "Agreement")]
    public bool Checked { get; set; }

    public string Fruit { get; set; }

    [Display(Name = "Gender")]
    public string Gender { get; set; }

    public class User
    {
        [Display(Name = "Name")]
        [Required]
        public string Name { get; set; }

        [Required]
        [StringLength(6)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [Display(Name = "Age")]
        [Range(18, 60)]
        public string Age { get; set; }

        [Display(Name = "Gender")]
        public string Gender { get; set; }

        public string Description { get; set; }

        [Display(Name = "Agreement")]
        public bool Agreement { get; set; }

        [Display]
        [Required(ErrorMessage = "Choose one")]
        public string Chart { get; set; }
    }
}

<Pager DataSource="@(new List<string>(new[] {
                         "Demo","FieldGroup","Span","Inline Field","Message","Loading","Field State","Size",
                         "Equal Width Form","Required","Equal Width FieldGroup","Annotation & Validation"
                     }))">
    <Body>
        <Header1>
            Form
            <SubHeader>
                A form displays a set of related user input fields in a structured way
            </SubHeader>
        </Header1>
        <Segment>
            Use <code>Form</code> instead of <code>EditForm</code> component.
        </Segment>

        <PresentationPart Title="Demo">
            <RunTemplate>
                <Grid EqualWidth>
                    <GridColumn>
                        <Form Model="this">
                           
                            <Field>
                                <TextBox @bind-Value="Name" DisplayName="User Name" />
                            </Field>
                            <Field>
                                <TextPassword @bind-Value="Password" DisplayName="Password" />
                            </Field>
                            <Field>
                                <TextNumber @bind-Value="Age" placeholder="Age" />
                            </Field>
                            <Field>
                                <TextArea @bind-Value="Description" DisplayName="Description" Placeholder="At least 3 words" Type="TextBoxType.MultiLine" />
                            </Field>
                            <Field>
                                <Select @bind-Value="Gender" Items="@(new[]{
                                                                        new SelectItem{ Text="Male",Value="Male" },
                                                                        new SelectItem{ Text="Female", Value="Female"}
                                                                        })"/>
                            </Field>
                            <Field>
                                <CheckBox @bind-Value="Checked"/>
                            </Field>
                            <FieldGroup Inline>
                                <RadioGroup @bind-Value="Fruit" DisplayName="Choose one fruit:">
                                    <RadioBox Value="@("Apple")">Apple</RadioBox>
                                    <RadioBox Value="@("Banana")">Banana</RadioBox>
                                    <RadioBox Value="@("Orange")">Banana</RadioBox>
                                </RadioGroup>
                            </FieldGroup>
                            <Button Emphasis="Emphasis.Primary">Submit</Button>
                        </Form>
                    </GridColumn>
                    <GridColumn>
                        Name：@Name
                        <br />
                        Password：@Password
                        <br />
                        Description：@Description
                        <br/>
                        Gender:@Gender
                        <br />
                        Agreement：@Checked
                        <br />
                        Fruit：@Fruit
                    </GridColumn>
                </Grid>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```cs
[Required]
public string Name { get; set; }

[Required]
[StringLength(6)]
public string Password { get; set; }

[Range(18, 60)]
public string Age { get; set; }

public string Description { get; set; }

[Display(Name = ""Agreement"")]
public bool Checked { get; set; }

public string Fruit { get; set; }

[Display(Name = ""Gender"")]
public string Gender { get; set; }
```
```html
<Form Model=""this"">
    <Field>
        <TextBox @bind-Value=""Name"" DisplayName=""User Name"" />
    </Field>
    <Field>
        <TextPassword @bind-Value=""Password"" DisplayName=""Password"" />
    </Field>
    <Field>
        <TextNumber @bind-Value=""Age"" placeholder=""Age""/>
    </Field>
    <Field>
        <TextArea @bind-Value=""Description"" DisplayName=""Description"" Placeholder=""At least 3 words""  />
    </Field>
    <Field>
        <Select @bind-Value=""Gender"" Items=""@(new[]{
                                                new SelectItem{ Text=""Male"",Value=""Male"" },
                                                new SelectItem{ Text=""Female"", Value=""Female""}
                                                })""/>
    </Field>
    <Field>
        <CheckBox @bind-Value=""Checked"" />
    </Field>
    <FieldGroup Inline>
        <RadioGroup @bind-Value=""Fruit"" DisplayName=""Choose one fruit:"">
            <RadioBox Value=""@(""Apple"")"" Text=""Apple"" />
            <RadioBox Value=""@(""Banana"")"" Text=""Banana"" />
            <RadioBox Value=""@(""Orange"")"" Text=""Orange"" />
        </RadioGroup>
    </FieldGroup>
    <Button Emphasis=""Emphasis.Primary"">Submit</Button>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="FieldGroup">
            <Description>
                A set of fields can appear grouped together
            </Description>
            <RunTemplate>
                <Form Model="this">
                    <FieldGroup>
                        <Field>
                            <label>First Name</label>
                            <input />
                        </Field>
                        <Field>
                            <label>Last Name</label>
                            <input />
                        </Field>
                        <Field>
                            <label>Middle Name</label>
                            <input />
                        </Field>
                    </FieldGroup>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form>
    <FieldGroup>
        <Field>
            <label>First Name</label>
            <input />
        </Field>
        <Field>
            <label>Last Name</label>
            <input />
        </Field>
        <Field>
            <label>Middle Name</label>
            <input />
        </Field>
    </FieldGroup>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Span">
            <Description>
                A field can specify its width in grid columns
            </Description>
            <RunTemplate>
                <Form Model="this">
                    <FieldGroup>
                        <Field Span="SpanSize.Is8">
                            <label>Name</label>
                            <input />
                        </Field>
                        <Field Span="SpanSize.Is3">
                            <label>Age</label>
                            <input />
                        </Field>
                        <Field Span="SpanSize.Is5">
                            <label>ID</label>
                            <input />
                        </Field>
                    </FieldGroup>
                </Form>

                <Form Model="this">
                    <FieldGroup Span="SpanSize.Is3">
                        <Field>
                            <label>First Name</label>
                            <input />
                        </Field>
                        <Field>
                            <label>Last Name</label>
                            <input />
                        </Field>
                        <Field>
                            <label>Middle Name</label>
                            <input />
                        </Field>
                    </FieldGroup>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form Model=""this"">
    <FieldGroup>
        <Field Span=""SpanSize.Is8"">
            <label>Name</label>
            <input />
        </Field>
        <Field Span=""SpanSize.Is3"">
            <label>Age</label>
            <input />
        </Field>
        <Field Span=""SpanSize.Is5"">
            <label>ID</label>
            <input />
        </Field>
    </FieldGroup>
</Form>

<Form Model=""this"">
    <FieldGroup Span=""SpanSize.Is3"">
        <Field>
            <label>First Name</label>
            <input />
        </Field>
        <Field>
            <label>Last Name</label>
            <input />
        </Field>
        <Field>
            <label>Middle Name</label>
            <input />
        </Field>
    </FieldGroup>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inline Field">
            <Description>
                A field can have its label next to instead of above it.
            </Description>
            <RunTemplate>
                <Form Model="this">
                    <FieldGroup Inline>
                        <Field Span="SpanSize.Is8">
                            <label>Name</label>
                            <input placeholder="First Name" />
                        </Field>
                        <Field Span="SpanSize.Is3">
                            <input placeholder="Last Name" />
                        </Field>
                        <Field Span="SpanSize.Is5">
                            <input placeholder="Middle Name" />
                        </Field>
                    </FieldGroup>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form Model=""this"">
    <FieldGroup Inline>
        <Field Span=""SpanSize.Is8"">
            <label>Name</label>
            <input placeholder=""First Name"" />
        </Field>
        <Field Span=""SpanSize.Is3"">
            <input placeholder=""Last Name"" />
        </Field>
        <Field Span=""SpanSize.Is5"">
            <input placeholder=""Middle Name"" />
        </Field>
    </FieldGroup>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Loading">
            <Description>
                If a form is in loading state, it will automatically show a loading indicator.
            </Description>
            <RunTemplate>
                <Form Model="this" Loading>
                    <Field>
                        Email
                        <input />
                    </Field>
                    <Field>
                        <Button>Submit</Button>
                    </Field>
                </Form>
                <Form Model="this" Loading Color="Color.Red">
                    <Field>
                        Email
                        <input />
                    </Field>
                    <Field>
                        <Button>Submit</Button>
                    </Field>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form Model=""this"" Loading>
    <Field>
        Email
        <input />
    </Field>
    <Field>
        <Button>Submit</Button>
    </Field>
</Form>
<Form Model=""this"" Loading Color=""Color.Red"">
    <Field>
        Email
        <input />
    </Field>
    <Field>
        <Button>Submit</Button>
    </Field>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Message">
            <Description>
                Any state of message blocks found inside a form are hidden by default.
            </Description>
            <RunTemplate>
                <Form Model="this" State="textState">
                    <Field>
                        <select @onchange="ChangeTextState">
                            <option value="">Default</option>
                            <option value="Success">Success</option>
                            <option value="Error">Error</option>
                            <option value="Info">Info</option>
                            <option value="Warning">Warning</option>
                        </select>
                    </Field>
                    <Field>
                        <label>Email</label>
                        <input type="email" />
                    </Field>
                    <Message State="State.Success">
                        <Header>Succeed！</Header>
                        <p>Form has submitted successfully!</p>
                    </Message>
                    <Message State="State.Error">
                        <Header>Error!</Header>
                        <p>Sorry, There is something wrong.</p>
                    </Message>
                    <Message State="State.Info">
                        <Header>Alert</Header>
                        <p>You have to fill all blanks</p>
                    </Message>
                    <Message State="State.Warning">
                        <Header>Attention</Header>
                        <p>Please stop your action now!</p>
                    </Message>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form Model=""this"" State=""textState"">
    <Field>
        <select @onchange=""ChangeTextState"">
            <option value="""">Default</option>
            <option value=""Success"">Success</option>
            <option value=""Error"">Error</option>
            <option value=""Info"">Info</option>
            <option value=""Warning"">Warning</option>
        </select>
    </Field>
    <Field>
        <label>Email</label>
        <input type=""email"" />
    </Field>
    <Message State=""State.Success"">
        <Header>Succeed！</Header>
        <p>Form has submitted successfully!</p>
    </Message>
    <Message State=""State.Error"">
        <Header>Error!</Header>
        <p>Sorry, There is something wrong.</p>
    </Message>
    <Message State=""State.Info"">
        <Header>Alert</Header>
        <p>You have to fill all blanks</p>
    </Message>
    <Message State=""State.Warning"">
        <Header>Attention</Header>
        <p>Please stop your action now!</p>
    </Message>
</Form>
```
```csharp
State? textState;
void ChangeTextState(ChangeEventArgs e)
{
    if (Enum.TryParse(e.Value?.ToString(), out State state))
    {
        textState = state;
    }
    else
    {
        textState = null;
    }
    StateHasChanged();
}
```
")
            </CodeTemplate>
        </PresentationPart>
       <PresentationPart Title="Field State">
            <Description>
                Individual fields may display a state
            </Description>
            <RunTemplate>
                <Form Model="this">
                    <Field State="State.Error">
                        <label>Name</label>
                        <input />
                    </Field>
                    <Field State="State.Success">
                        <label>English Name</label>
                        <input />
                    </Field>
                    <Field State="State.Info">
                        <label>Chinese Name</label>
                        <input />
                    </Field>
                    <Field State="State.Warning">
                        <label>Used Name</label>
                        <input />
                    </Field>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form Model=""this"">
    <Field State=""State.Error"">
        <label>Name</label>
        <input />
    </Field>
    <Field State=""State.Success"">
        <label>English Name</label>
        <input />
    </Field>
    <Field State=""State.Info"">
        <label>Chinese Name</label>
        <input />
    </Field>
    <Field State=""State.Warning"">
        <label>Used Name</label>
        <input />
    </Field>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
         <PresentationPart Title="Size">
            <Description>
                A form can vary in size
            </Description>
            <RunTemplate>
                <Form Model="this" Size="Size.Mini">
                    <FieldGroup Span="SpanSize.Is2">
                        <Field><input placeholder="First Name" /></Field>
                        <Field><input placeholder="Last Name" /></Field>
                    </FieldGroup>
                </Form>
                <Form Model="this" Size="Size.Tiny">
                    <FieldGroup Span="SpanSize.Is2">
                        <Field><input placeholder="First Name" /></Field>
                        <Field><input placeholder="Last Name" /></Field>
                    </FieldGroup>
                </Form>
                <Form Model="this" Size="Size.Medium">
                    <FieldGroup Span="SpanSize.Is2">
                        <Field><input placeholder="First Name" /></Field>
                        <Field><input placeholder="Last Name" /></Field>
                    </FieldGroup>
                </Form>
                <Form Model="this" Size="Size.Big">
                    <FieldGroup Span="SpanSize.Is2">
                        <Field><input placeholder="First Name" /></Field>
                        <Field><input placeholder="Last Name" /></Field>
                    </FieldGroup>
                </Form>
                <Form Model="this" Size="Size.Massive">
                    <FieldGroup Span="SpanSize.Is2">
                        <Field><input placeholder="First Name" /></Field>
                        <Field><input placeholder="Last Name" /></Field>
                    </FieldGroup>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form Model=""this"" Size=""Size.Mini"">
    <FieldGroup Span=""ColSpan.Is2"">
        <Field><input placeholder=""First Name"" /></Field>
        <Field><input placeholder=""Last Name"" /></Field>
    </FieldGroup>
</Form>
<Form Model=""this"" Size=""Size.Tiny"">
    <FieldGroup Span=""ColSpan.Is2"">
        <Field><input placeholder=""First Name"" /></Field>
        <Field><input placeholder=""Last Name"" /></Field>
    </FieldGroup>
</Form>
<Form Model=""this"" Size=""Size.Medium"">
    <FieldGroup Span=""ColSpan.Is2"">
        <Field><input placeholder=""First Name"" /></Field>
        <Field><input placeholder=""Last Name"" /></Field>
    </FieldGroup>
</Form>
<Form Model=""this"" Size=""Size.Big"">
    <FieldGroup Span=""ColSpan.Is2"">
        <Field><input placeholder=""First Name"" /></Field>
        <Field><input placeholder=""Last Name"" /></Field>
    </FieldGroup>
</Form>
<Form Model=""this"" Size=""Size.Massive"">
    <FieldGroup Span=""ColSpan.Is2"">
        <Field><input placeholder=""First Name"" /></Field>
        <Field><input placeholder=""Last Name"" /></Field>
    </FieldGroup>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Equal Width Form">
            <Description>
                Forms can automatically divide fields to be equal width
            </Description>
            <RunTemplate>
                <Form Model="this" EqualWidth>
                    <FieldGroup>
                        <Field>
                            <input placeholder="First Name" />
                        </Field>
                        <Field>
                            <input placeholder="Last Name" />
                        </Field>
                        <Field>
                            <input placeholder="Middle Name" />
                        </Field>
                    </FieldGroup>
                    <FieldGroup>
                        <Field>
                            <label>Gender</label>
                            <select>
                                <option>Male</option>
                                <option>Female</option>
                            </select>
                        </Field>
                        <Field>
                            <label>Age</label>
                            <input />
                        </Field>
                    </FieldGroup>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form Model=""this"" EqualWidth>
    <FieldGroup>
        <Field>
            <input placeholder=""姓氏"" />
        </Field>
        <Field>
            <input placeholder=""名字"" />
        </Field>
        <Field>
            <input placeholder=""曾用名"" />
        </Field>
    </FieldGroup>
     <FieldGroup>
        <Field>
            <label>性别</label>
            <select>
            <option>男</option>
            <option>女</option>
            </select>
        </Field>
        <Field>
            <label>年龄</label>
            <input/>
        </Field>
    </FieldGroup>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Required">
            <Description>
                A field can show that input is mandatory
            </Description>
            <RunTemplate>
                <Form Model="this">
                    <Field Required>
                        <label>Name</label>
                        <input />
                    </Field>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form Model=""this"">
    <Field Required>
        <label>Name</label>
        <input/>
    </Field>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Equal Width FieldGroup">
            <Description>
                FieldGroup can automatically divide fields to be equal width
            </Description>
            <RunTemplate>
                <Form Model="this">
                    <FieldGroup EqualWidth>
                        <Field>
                            <label>Name</label>
                            <input />
                        </Field>
                        <Field>
                            <label>Age</label>
                            <input />
                        </Field>
                        <Field>
                            <label>ID</label>
                            <input />
                        </Field>
                    </FieldGroup>
                    <FieldGroup EqualWidth>
                        <Field>
                            <label>身高</label>
                            <input />
                        </Field>
                        <Field>
                            <label>体重</label>
                            <input />
                        </Field>
                    </FieldGroup>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Form Model=""this"">
    <FieldGroup EqualWidth>
        <Field>
            <label>Name</label>
            <input />
        </Field>
        <Field>
            <label>Age</label>
            <input />
        </Field>
        <Field>
            <label>ID</label>
            <input />
        </Field>
        </FieldGroup>
        <FieldGroup EqualWidth>
        <Field>
            <label>Height</label>
            <input />
        </Field>
        <Field>
            <label>Weight</label>
            <input />
        </Field>
    </FieldGroup>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>

        @code {
        User model = new User();
        }

        <PresentationPart Title="Annotation & Validation">
            <Description>
                Identity the <code>For</code> in <code>Field</code> for <code>System.ComponentModel.DataAnnotations</code> validation by <code>EditContext</code> instance.

                <p>
                    The identitification of <code>For</code> is followed by rule as below:
                </p>
                <Message State="State.Info">
                    <List Ordered>
                        <Item><code>DisplayAttribute.Name</code> to be the label text in <code>Field</code></Item>
                        <Item><code>RequiredAttribute</code> to be set the <code>Required</code> in <code>FieldGroup</code></Item>
                        <Item><code>State.Error</code> is set while validation failed, and <code>State.Success</code> is set while validation is passed. You can set <code>RecoverOnValid</code> while validation is passed instead of <code>State.Success</code> for <code>Field</code></Item>
                    </List>
                </Message>
            </Description>
            <RunTemplate>
                <Form Model="model" OnValidSubmit="Submit">
                   
                    <FieldGroup EqualWidth>
                        <Field For="()=>model.Name">
                            <TextBox @bind-Value="model.Name" />
                        </Field>
                        <Field For="()=>model.Password">
                            <TextPassword @bind-Value="model.Password"  />
                        </Field>
                        <Field For="()=>model.Age" RecoverOnValid>
                            <TextNumber @bind-Value="model.Age" />
                        </Field>
                       <Field For="()=>model.Gender">
                            <Select @bind-Value="model.Gender" Items="@(new SelectItem[]{new(){ Text="男",Value="男"},new(){Text="女",Value="女"}})"/>
                        </Field>
                    </FieldGroup>
                    <FieldGroup Inline> 
                      <Field For="()=>model.Agreement">
                            <CheckBox @bind-Value="model.Agreement" />
                        </Field>
                        <Field>
                        <RadioGroup @bind-Value="model.Chart">
                            <RadioBox Value="@("Bar")" >Bar Chart</RadioBox>
                            <RadioBox Value="@("Pie")" >Pie Chart</RadioBox>
                            <RadioBox Value="@("Line")" >Line Chart</RadioBox>
                        </RadioGroup></Field>
                    </FieldGroup>
                    <Button Color="Color.Blue">Submit</Button>
                </Form>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```csharp
[Required]
[Display(Name=""Name"")]
public string Name { get; set; }

[Required]
[Display(Name = ""Password"")]
[StringLength(6)]
public string Password { get; set; }

[Display(Name = ""Age"")]
[Range(18,60)]
public string Age { get; set; }

[Display(Name=""Gender"")]
[Required]
public string Gender { get; set; }
```

```html
<Form Model=""model"" OnValidSubmit=""Submit"" DelayBeforeValidSubmit=""1000"">
    <DataAnnotationsValidator />
    <FieldGroup EqualWidth>
        <Field For=""()=>Name"">
            <InputText @bind-Value=""Name"" />
        </Field>
        <Field For=""()=>Password"">
            <InputText @bind-Value=""Password"" type=""password""/>
        </Field>
        <Field For=""()=>Age"" RecoverOnValid>
            <InputText @bind-Value=""Age"" />
        </Field>
        <Field For=""()=>model.Gender"">
            <Select @bind-Value=""model.Gender"" Items=""@(new SelectItem[]{new(){ Text=""男"",Value=""男"",new(){Text=""女"",Value=""女""}})""/>
        </Field>
        </FieldGroup>
            <FieldGroup Inline>
            <Field For=""()=>model.Agree"">
            <CheckBox @bind-Value=""model.Agree"" />
        </Field>
        <RadioGroup @bind-Value=""model.Chart"">
            <RadioBox Value=""@(""Bar"")"" Text=""Bar Chart"" />
            <RadioBox Value=""@(""Pie"")"" Text=""Pie Chart"" />
            <RadioBox Value=""@(""Line"")"" Text=""Line Chart"" />
        </RadioGroup>
    </FieldGroup>
    <Button Color=""Color.Blue"">Submit</Button>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
    </Body>
</Pager>
@code {
    State? textState;
    void ChangeTextState(ChangeEventArgs e)
    {
        if (Enum.TryParse(e.Value?.ToString(), out State state))
        {
            textState = state;
        }
        else
        {
            textState = null;
        }
        StateHasChanged();
    }

    void Submit()
    {

    }
}